<template>
    <div>
        <ul class="store-tap fixed" id="store-tap" ref="jsStoreTap">
            <li>
                <router-link to="/homePage" :class="[isHome ? 'store-avtive' : '']">首页</router-link>
            </li>
            <li>
                <router-link to="/storeItem" :class="[isItem ? 'store-avtive' : '']">商品</router-link>
            </li>
            <li>
                <router-link to="/activities" :class="[isAct ? 'store-avtive' : '']">活动</router-link>
            </li>
            <li>
                <router-link to="/coupons" :class="[isCoupon ? 'store-avtive' : '']">优惠券</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                path: this.$route.path,
                homePath: ['/store/mall/home'],
                itemPath: ['/item/storeItem'],
                actPath: ['/store/activities'],
                couponPath: ['/coupon/coupons']
            }
        },
        computed: {
            isHome() {
                return !this.homePath.indexOf(this.path)
            },
            isItem() {
                return !this.itemPath.indexOf(this.path)
            },
            isAct() {
                return !this.actPath.indexOf(this.path)
            },
            isCoupon() {
                return !this.couponPath.indexOf(this.path)
            }
        },
        mounted: function () {
            //下面内容删除
        }
    }
</script>

<style scoped>
    .store-tap.fixed{
        z-index: 1050;
    }
</style>
